<template>
    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.1)"
        style="padding-top: 5px;height: calc(100vh - 185px)">
        <div class="header">
            <el-form :model="params" label-width="110px" style="display: flex">
                <el-form-item label="选择站点" class="timepanel">
                    <el-select v-model="params.id" placeholder="请选择" style="width: 200px" @change="stationChange">
                        <el-option v-for="item in stationList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="查询范围">
                    <el-select v-model="params.type" placeholder="请选择" style="width: 200px" @change="typeChange">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="自定义时间" v-show="customTimeShow === true">
                    <el-date-picker @change="timeChange" v-model="time" format="yyyy-MM-dd" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </div>
        <div class="content">
            <div style="width: 100%;display: flex;margin: 10px 0 40px 0" :style="{'height':clientHeight-120+'px'}">
                <div class="scroll">
                    <el-scrollbar class="page-component_scroll">
                        <div style="display: flex;flex-wrap: wrap;width: 100%;">
                            <div style="width: calc(33.3% - 10px)" class="bgcolor" v-for="(item, i) in stationData" :key="i"
                                :class="[{'marginT-5': i > 2},{'marginL-5': i % 3 !== 0}]">
                                <div class="item-text">监测因子-{{item.name}}</div>
                                <div :style="{'height':(clientHeight-380) / 2 +'px'}">
                                    <div :id="'item'+ i" style="height: 100%;width: 100%;">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>
                    <div class="data-null" v-show="showHint">暂无数据!</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import weatherApi from '@/api/weatherApi'

export default {
    name: 'weatherHistory',
    data() {
        return {
            clientHeight: '',
            loading: true,
            showData: true,
            time: null,
            time1: null,
            time2: null,
            num: 0,
            stationList: [],
            options: [{
                value: 1,
                label: '过去一周'
            }, {
                value: 2,
                label: '过去一月'
            }, {
                value: 3,
                label: '过去一年'
            }, {
                value: 4,
                label: '自定义'
            }],
            customTimeShow: false,
            fengxiang: {
                text: [{ text: '北' }, { text: '西北' }, { text: '西' }, { text: '西南' }, { text: '南' }, { text: '东南' }, { text: '东' }, { text: '东北' }],
                data: [0, 0, 0, 0, 0, 0, 0, 0],
                percent: [],
                max: 1
            },
            params: {
                id: '',
                type: 1,
                startDate: '',
                endDate: ''
            },
            stationData: [],
            data: [],
            date: [],
            showHint: false
        }
    },
    mounted() {
        this.clientHeight = `${document.documentElement.clientHeight}` // 获取浏览器可视区域高度
    },
    created() {
        this.getStation()
    },
    methods: {
        getStation() {
            weatherApi.getWeatherStationList().then((res) => {
                if (res.data.messageType === '0') {
                    var result = res.data.result
                    if (result && result.length > 0) {
                        for (var i = 0; i < result.length; i++) {
                            var obj = { value: '', label: '' }
                            obj.value = result[i].id
                            obj.label = result[i].name
                            this.stationList.push(obj)
                        }
                        this.params.id = this.stationList[0].value
                    }
                    this.getStationData()
                }
            })
        },
        getStationData() {
            this.showHint = false
            this.stationData = []
            if (this.params && this.params.id) {
                weatherApi.getWeatherStationHistoryData(this.params).then((res) => {
                    if (res.data.messageType === '0') {
                        if (res.data.result == null) {
                            this.showHint = true
                        }
                        if (res.data.result) {
                            var result = res.data.result.data
                            this.time1 = new Date()
                            for (var i = 0; i < result.length; i++) {
                                var obj = { name: '', unit: '', date: [], data: [], Ymax: null, Ymin: null }
                                obj.name = result[i].display
                                obj.unit = result[i].unit
                                for (var j = 0; j < result[i].values.length; j++) {
                                    if (result[i].display === '风向') {
                                        obj.date = [{ text: '北' }, { text: '西北' }, { text: '西' }, { text: '西南' }, { text: '南' }, { text: '东南' }, { text: '东' }, { text: '东北' }]
                                        obj.data = [0, 0, 0, 0, 0, 0, 0, 0]
                                        var n = result[i].values[j].v
                                        if (n >= 0 && n < 23 || n < 360 && n >= 338) {
                                            this.fengxiang.data[0] += 1
                                        }
                                        if (n >= 293 && n < 338) {
                                            this.fengxiang.data[1] += 1
                                        }
                                        if (n >= 248 && n < 293) {
                                            this.fengxiang.data[2] += 1
                                        }
                                        if (n >= 203 && n < 248) {
                                            this.fengxiang.data[3] += 1
                                        }
                                        if (n >= 158 && n < 203) {
                                            this.fengxiang.data[4] += 1
                                        }
                                        if (n >= 113 && n < 158) {
                                            this.fengxiang.data[5] += 1
                                        }
                                        if (n >= 68 && n < 113) {
                                            this.fengxiang.data[6] += 1
                                        }
                                        if (n >= 23 && n < 68) {
                                            this.fengxiang.data[7] += 1
                                        }
                                    } else {
                                        var t = result[i].values[j].t
                                        var v = result[i].values[j].v.toFixed(2)
                                        obj.date.push(t)
                                        obj.data.push(v)
                                    }
                                }
                                obj.Ymax = Math.max.apply(null, obj.data)
                                obj.Ymin = Math.min.apply(null, obj.data)
                                this.stationData.push(obj)
                            }
                            var total = 0
                            for (var a = 0; a < 8; a++) {
                                total += this.fengxiang.data[a]
                            }
                            for (var b = 0; b < 8; b++) {
                                this.fengxiang.percent[b] = (this.fengxiang.data[b] / total).toFixed(3)
                            }
                            this.fengxiang.max = Math.max.apply(null, this.fengxiang.percent)
                            this.drawEcharts()
                        }
                    }
                    this.loading = false
                })
            }
        },
        timeChange(params) {
            this.params.startDate = this.conversionTime(params[0])
            this.params.endDate = this.conversionTime(params[1])
            this.loading = true
            this.getStationData()
        },
        conversionTime(time) {
            let year = time.getFullYear()
            let month = (time.getMonth() < 9 ? '0' : '') + (time.getMonth() + 1)
            let day = (time.getDate() < 10 ? '0' : '') + time.getDate()
            return year + '-' + month + '-' + day
        },
        typeChange(params) {
            this.params.type = params
            if (params === 4) {
                this.customTimeShow = true
            } else {
                this.loading = true
                this.customTimeShow = false
                this.getStationData()
            }
        },
        stationChange(params) {
            this.loading = true
            this.params.id = params
            this.getStationData()
        },
        drawEcharts() {
            this.$nextTick(function () {
                for (var i = 0; i < this.stationData.length; i++) {
                    var unit = this.stationData[i].unit
                    var id = 'item' + i
                    let dom = this.$echarts.init(document.getElementById(id))
                    var option = {}
                    var fengxiang = this.fengxiang
                    if (this.stationData[i].name === '风向') {
                        option = {
                            tooltip: {
                                formatter: function () {
                                    var text = '风玫瑰<br/>'
                                    for (var i = 0; i < 8; i++) {
                                        var text1 = fengxiang.text[i].text + '：' + (fengxiang.percent[i] * 100).toFixed(1) + '%<br/>'
                                        text += text1
                                    }
                                    return text
                                }
                            },
                            polar: [
                                {
                                    indicator: [{ text: '北', max: this.fengxiang.max }, {
                                        text: '西北',
                                        max: this.fengxiang.max
                                    },
                                    { text: '西', max: this.fengxiang.max }, { text: '西南', max: this.fengxiang.max },
                                    { text: '南', max: this.fengxiang.max }, { text: '东南', max: this.fengxiang.max },
                                    { text: '东', max: this.fengxiang.max }, { text: '东北', max: this.fengxiang.max }]
                                }
                            ],
                            calculable: true,
                            series: [
                                {
                                    name: '',
                                    type: 'radar',
                                    data: [
                                        {
                                            value: this.fengxiang.percent
                                        }
                                    ]
                                }
                            ]
                        }
                    } else {
                        option = {
                            tooltip: {
                                // 当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。
                                trigger: 'axis',
                                formatter: function (params) {
                                    return params[0].axisValueLabel + '<br/>' + params[0].data + params[0].seriesName
                                }
                            },
                            xAxis: {
                                type: 'category', // category为一级分类,适用于离散的类目数据
                                boundaryGap: false, // 无间隙
                                data: this.stationData[i].date,
                                splitLine: {
                                    show: false
                                }, // 去掉网格线
                                axisLine: {
                                    lineStyle: {
                                        type: 'solid',
                                        color: '#fff', // 左边线的颜色
                                        width: '1' // 坐标线的宽度
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value', // 'value' 数值轴，适用于连续数据。
                                min: this.stationData[i].Ymin,
                                max: this.stationData[i].Ymax,
                                boundaryGap: [0, '100%'], // 分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，
                                splitLine: {
                                    show: false
                                }, // 去掉网格线
                                axisLine: {
                                    lineStyle: {
                                        type: 'solid',
                                        color: '#fff', // 左边线的颜色
                                        width: '1' // 坐标线的宽度
                                    }
                                }
                            },
                            dataZoom: [{
                                show: true,
                                start: 80
                            },
                            {
                                start: 0,
                                end: 10, // handleIcon 手柄的 icon 形状，支持路径字符串
                                handleSize: '80%', //  控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
                                handleStyle: {
                                    color: '#fff'
                                },
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                            ],
                            series: [
                                {
                                    name: this.stationData[i].unit,
                                    type: 'line',
                                    smooth: true, // 开启平滑处理。true的平滑程度相当于0.5
                                    symbol: 'none', // 标记的图形。
                                    sampling: 'average', //  取过滤点的平均值
                                    itemStyle: {
                                        normal: {
                                            color: '#71b871' //  线的颜色。
                                        }
                                    },
                                    markPoint: {
                                        data: [
                                            { type: 'max', name: '最大值' },
                                            { type: 'min', name: '最小值' }
                                        ],
                                        label: {
                                            normal: {
                                                formatter: function (params) {
                                                    return params.value.toFixed(2)
                                                }
                                            }
                                        }
                                    },
                                    markLine: {
                                        data: [
                                            { type: 'average', name: '平均值' }
                                        ]
                                    },
                                    data: this.stationData[i].data
                                }
                            ]
                        }
                    }

                    dom.setOption(option, true)
                }
                this.loading = false
                this.time2 = new Date()
            })
        }
    }
}
</script>

<style scoped>
</style>
<style lang="less" scoped>
.scroll {
    overflow: auto;
    height: 655px;
    width: 100%;
    overflow-x: hidden;
}
.data-null {
    color: #ccc;
    font-size: 18px;
    text-align: center;
    margin-top: 80px;
}

/deep/ .el-scrollbar__view {
    margin-bottom: 50px;
}

/deep/ .el-select {
    height: 40px;
}

/deep/ .el-input--suffix .el-input__inner {
    background-color: transparent;
}

.scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #fff;
}

.scroll::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
    border-radius: 10px;
    background-color: rgba(240, 240, 240, 0.5);
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(14, 107, 183, 1);
    background-color: rgba(14, 107, 183, 0.5);
}

.bgcolor {
    background-color: rgba(18, 49, 142, 0.2);
    border: 1px solid #00ffff;
    border-image: url('../../../../assets/img/item-box.png');
    border-image-slice: 27;
    border-image-width: 27px;
    border-image-repeat: repeat;
}

.marginT-5 {
    margin-top: 5px;
}

.marginL-5 {
    margin-left: 5px;
}

.item-text {
    width: 450px;
    height: 25px;
    background: linear-gradient(
        90deg,
        rgba(33, 125, 194, 1),
        rgba(9, 65, 110, 1),
        rgba(9, 65, 110, 1)
    );
    font-family: 'Microsoft YaHei';
    font-weight: 400;
    font-size: 15px;
    color: rgba(255, 255, 255, 1);
    margin: 10px 0 0 10px;
    padding: 7px 0 0 7px;
}
</style>
<style scoped>
.ctrl .el-range-editor.is-active,
.el-range-editor.is-active:hover {
    border-color: #3abcb0 !important;
}

.ctrl .el-date-editor .el-range-input,
.ctrl .el-date-editor .el-range-separator {
    color: #c7cad0;
}

.el-loading-spinner i {
    font-size: 20px;
    color: #3abcb0 !important;
}

.el-loading-spinner .el-loading-text {
    font-size: 15px;
    color: #3abcb0 !important;
}
</style>

<style lang="less" scoped>
.container {
}

.el-inputs {
    background-color: #32f1ff16;
    border: 1px solid #fff;
    border-radius: 0;
}

.el-textareas {
    width: 590px;
    border: 1px solid #fff;
    border-radius: 0;
    outline: 0;
}

.header {
    height: 45px;
    display: flex;
    flex-direction: row;
    margin: 30px 0 20px 0;

    .handle {
        width: 80px;
        margin-left: 5px;
        margin-right: 50px;
    }

    .btn {
        width: 80px;
        cursor: pointer;
        border: none;
        padding: 10px;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        background: rgba(14, 107, 183, 0.9);
        margin-left: 35px;
        border-right: 0;
    }

    .search {
        width: 350px;
        height: 45px;
        font-size: 22px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        /*border: 1px solid #0E6BB7;*/

        .p-frame {
            -webkit-appearance: none;
            background-color: transparent;
            background-image: none;
            border-radius: 0;
            color: #fff;
        }
    }
}

.headerIndex {
    height: 45px;
    display: flex;
    flex-direction: row;
    margin: 0px 0 20px 0;

    .handle {
        width: 80px;
        margin-left: 5px;
        margin-right: 50px;
    }

    .btn {
        width: 80px;
        cursor: pointer;
        border: none;
        padding: 10px;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        background: rgba(14, 107, 183, 0.9);
        margin-left: 35px;
        border-right: 0;
    }

    .search {
        width: 350px;
        height: 45px;
        font-size: 22px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
}

/deep/ .el-input__inner {
    color: #ffffff;
    font-size: 1.5rem;
    height: 45px;
    background-color: transparent;
    outline: 0;
}

/deep/ .el-form--inline .el-form-item {
    text-align: right;
}

.content {
    /*height: 631px;*/
    /*width: 1726px;*/
    /*background-color: deepskyblue;*/
    /*.tableWrapper /deep/ .el-table--border th{*/
    /*  height: 80px;*/
    /*}*/

    .tableWrapper {
        .line {
            display: inline-flex;
            height: 21px;
            width: 1px;
            background: rgba(0, 255, 255, 1);
            margin: 0 10px;
            vertical-align: middle;
        }

        .pointer {
            cursor: pointer;
        }
    }

    .tableWrapper /deep/ .el-checkbox__inner {
        height: 29px;
        width: 29px;
        /*background-color: #ffffff;*/
        font-size: 28px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        background: none;
    }

    .tableWrapper /deep/ .el-tooltip__popper {
        background-color: red;
    }

    .tableWrapper /deep/ .el-checkbox__inner::after {
        border-width: 2px;
        /*border-color: black;*/
        height: 9px;
        left: 10px;
        top: 6px;
        width: 6px;
    }

    .tableWrapper
        /deep/
        .el-checkbox__input.is-indeterminate
        .el-checkbox__inner::before {
        top: 12px;
        background: white;
    }
}

.dialog /deep/ .el-dialog {
    width: 45%;
}

.dialogBtn {
    font-size: 1.6rem;

    &:hover {
        background: rgba(12, 161, 151, 1);
    }
}

.deleteText {
    font-size: 1.8rem;
}

.footer {
    margin-top: 40px;
    color: #ffffff;
    font-size: 16px;

    .info {
        .select {
            width: 52px;
            height: 35px;
        }

        .select /deep/ .el-input__inner {
            padding-left: 5px;
            padding-right: 0;
        }

        .select /deep/ .el-input__icon {
            width: 15px;
        }

        .select /deep/ .el-select__caret.is-reverse {
        }
    }

    .paging {
        text-align: right;
        padding-right: 30px;
        margin-top: -20px;

        & /deep/ .el-pagination.is-background .btn-prev {
            background: none;
            border: 1px solid rgba(0, 255, 255, 1);
        }

        & /deep/ .el-pagination.is-background .btn-next {
            background: none;
            border: 1px solid rgba(0, 255, 255, 1);
        }

        & /deep/ .el-pager li {
            background: none;
            border: 1px solid rgba(0, 255, 255, 1);
        }

        & /deep/ .el-pagination__total,
        & /deep/ .el-pagination__sizes {
            float: left;
            font-size: 1.6rem;
            height: 35px;
            line-height: 35px;
        }

        & /deep/ .el-input__inner {
            height: 35px;
        }

        & /deep/ .el-input .el-input__inner {
            padding-right: 20px;
            color: #ffffff;
            font-size: 1.6rem;
        }
    }
}
</style>
